<template>
  <div class="wrapper" :class="type">
    <div class="title_da">为什么选择我们？</div>
    <div class="title_xiao">11年专业店铺出租服务平台，您身边的转店助手！ </div>
    <div class="title_img">
      <img :src="require('../../../assets/img/' + type + '/icon6.png')">
      <div>大优势</div>
    </div>
    <div class="title_imgX">助力商途 · 一级口碑 · 行业标杆</div>
    <div class="wrappericon">
        <ul class="clearfix">
            <li>
                <img :src="require('../../../assets/img/zt/advantage1.png')">
                <div>
                    <div class="title">01 海量真实铺源</div>
                    <p>转店专家实地考察</p>
                    <p>获取精准信息</p>
                    <p>对店铺信息进行整合归纳推广</p>
                </div>
            </li>
            <li>
                <div>
                    <div class="title">02 百万求租用户</div>
                    <p>日均7万+用户在平台实时</p>
                    <p>抢订商铺、免费找店选址</p>
                </div>
                <img :src="require('../../../assets/img/zt/advantage2.png')">
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/advantage3.png')">
                <div>
                    <div class="title">03 多平台推广</div>
                    <p>9大平台联合推广，全网曝光提高覆盖率，增加筛选人群</p>
                </div>
            </li>
            <li>
                <div>
                    <div class="title">04 人工精准匹配</div>
                    <p>分析客户情况，捕捉客户需求筛选意向客户</p>
                    <p>人工匹配推送优质客户</p>
                </div>
                <img :src="require('../../../assets/img/zt/advantage4.png')">
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/advantage5.png')">
                <div>
                    <div class="title">05 专业经理人协助签约</div>
                    <p>搭建双方桥梁</p>
                    <p>促进彼此沟通，</p>
                    <p>撮合议价，协助签约</p>
                </div>
            </li>
            <li>
                <div>
                    <div class="title">06 全程托管、直至成交</div>
                    <p>专业客服转店服务</p>
                    <p>平台推广无忧</p>
                    <p>量身定制推广方案</p>
                    <p>转店达人一对一服务</p>
                </div>
                <img :src="require('../../../assets/img/zt/advantage6.png')">
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyProblem',
  props: {
    type: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  border-radius 5px
  padding 0rem /* 26/50 */ .4rem 0rem /* 28/50 */ .4rem
  position relative
  margin-top 1.06rem /* 53/50 */
  .title_da
    font-size .7rem /* 35/50 */
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    text-align center
    font-weight 800
    color rgba(0,0,0,.9)
  .title_xiao
    font-size .28rem /* 14/50 */
    text-align center
    color rgba(0,0,0,.7)
    line-height .46rem /* 23/50 */
    margin-bottom .4rem /* 20/50 */
  .title_img
    width 100%
    height .8rem /* 40/50 */
    line-height .8rem /* 40/50 */
    background-image url('../../../assets/img/one/iconbg.png')
    background-size 6.34rem /* 317/50 */ 100%
    background-repeat no-repeat
    background-position center
    margin-top .84rem /* 42/50 */
    display flex
    position relative
    text-align center
    div
      width 100%
      font-size .48rem /* 24/50 */
      color #fff
      font-weight bold
      padding-left .6rem
    img
      position absolute
      left 2.66rem
      top -.16rem /* 8/50 */
      width .58rem /* 29/50 */
      height .82rem /* 41/50 */
  .title_imgX
    text-align center
    font-size .28rem /* 14/50 */
    margin-top .3rem /* 15/50 */
    margin-bottom .48rem /* 24/50 */
  .wrappericon
    width 100%
    height 22.4rem /* 1120/50 */
    border-radius .1rem /* 5/50 */
    padding-top .06rem /* 3/50 */
    ul
      width 100%
      height 22.3rem /* 1115/50 */
      background #ffffff
      border-radius .1rem /* 5/50 */
      padding-bottom .7rem /* 35/50 */
      li
        margin-bottom .3rem /* 15/50 */
        width 100%
        font-size .3rem /* 15/50 */
        text-align center
        display flex
        padding .42rem .3rem 0 .3rem
        justify-content space-between
        div
          text-align left
          .title
            font-size .32rem /* 16/50 */
            font-weight bold
            line-height 1.14rem /* 57/50 */
          p
            font-size .28rem /* 14/50 */
            line-height .46rem /* 23/50 */
            color rgba(0,0,0,.9)
        img
          width 2.92rem /* 146/50 */
          height 2.92rem /* 146/50 */
          margin-left .2rem
          margin-right 0px
        img:nth-child(odd)
          margin-right .2rem
          margin-left 0px
.one
  .title_img
    width 100%
    background-image url('../../../assets/img/one/iconbg.png')
  .wrappericon
    background #D77D50
  .title_imgX
    color rgba(185, 72, 10, .7)
  .title
    color #652705
.two
  .title_img
    width 100%
    background-image url('../../../assets/img/two/iconbg.png')
  .wrappericon
    background #E66D71
  .title_imgX
    color rgba(195, 8, 14, .7)
  .title
    color #7D0509
.there
  .title_img
    width 100%
    background-image url('../../../assets/img/there/iconbg.png')
  .wrappericon
    background #7AA1F1
  .title_imgX
    color rgba(8, 91, 149, .7)
  .title
    color #05385C
</style>
